<!DOCTYPE html>
<head>
    <title>商品详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.min.css" /><!-- bootstrap -->
    <script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/jquery-validation/jquery.validate.min.js"></script> <!-- jquery-validator -->
    <script type="text/javascript" src="/jquery-validation/localization/messages_zh.min.js"></script>
    <script type="text/javascript" src="/layer/layer.js"></script><!-- layer -->
    <script type="text/javascript" src="/js/md5.min.js"></script><!-- md5.js -->
    <script type="text/javascript" src="/js/common.js"></script><!-- common.js -->
    <script type="text/javascript" src="/js/socket.js"></script><!-- common.js -->
</head>
<body>
<div class="panel panel-default">
    <div class="panel-heading">秒杀商品详情</div>
    <div class="panel-body">
    <div id="userTip" style="display: none">
        <span> 您还没有登录，请<a href="/login.html">登陆</a>后再操作<br/></span>
    </div>
    <span>没有收货地址的提示。。。</span>
</div>
<table class="table">
    <tr>
        <td>商品名称</td>
        <td colspan="3" id="goodName"></td>
    </tr>
    <tr>
        <td>商品图片</td>
        <td colspan="3"><img id="goodImg"  width="200" height="200" /></td>
    </tr>
    <tr>
        <td>秒杀开始时间</td>
        <td id="startDate"></td>
        <td id="seckillTip">

        </td>
        <td>
            <img id="verifyCodeImg" width="80" height="32"  onclick="initVerifyCodeImg()" style="display: none">
            <input id="verifyCode" style="display: none">
            <button class="btn btn-primary btn-block" type="button" id="buyButton" onclick="getPath()">立即秒杀</button>
        </td>
    </tr>
    <tr>
        <td>商品原价</td>
        <td colspan="3" id="goodPrice"></td>
    </tr>
    <tr>
        <td>秒杀价</td>
        <td colspan="3" id="seckillPrice"></td>
    </tr>
    <tr>
        <td>库存数量</td>
        <td colspan="3" id="stockCount"></td>
    </tr>
</table>
</div>
<script>
    var seckillId=getQueryString("seckillId");
    var u;
    var uuid;
    //根据用户是否有登入展示的消息，如果没登入，我们将 id-userTime div 显示出来


    $.ajax({
        url:"http://localhost:9000/member/getCurrentUser",
        type:"get",
        xhrFields: { withCredentials: true },
        sucess:function (data) {
            if (data.code==200){
                //请求的返回值应该是当前登入的用户消息
                //user对象
                showUserStatus(data.data)
            }else {
                layer.msg("操作状态码"+data.code+"错误消息"+data.msg);
            }
        }
    })
//初始化验证码
    function initVerifyCodeImg() {
        //加个时间搓解决缓存问题
        $("#verifyCodeImg").prop("src","http://localhost:9000/seckill/initVerifyCodeImg?uuid"+uuid+"&time"+new Date().getTime());
    }
    function getPath() {
        if (!u){
            layer.msg("请登入在操作")
            return;
        }


        $.ajax({
            url:"http://localhost:9000/seckill/getPath",
            type:"post",
            xhrFields: { withCredentials: true },
            data:{"uuid":uuid,"verifyCode":$("#verifyCode".val())},
            sucess:function (data) {
                if (data.code==200){
                doSeckill(data.data)
                }else {
                    layer.msg("操作状态码"+data.code+"错误消息"+data.msg);
                }
            }
        })
    }
//秒杀
    function doSeckill(path) {
        if (!u){
            layer.msg("请登入在操作")
            return;
        }


        $.ajax({
            url:"http://localhost:9000/seckill/order/"+path+"/doSeckill",
            type:"post",
            xhrFields: { withCredentials: true },
            data:{"seckillId":seckillId,"uuid":uuid},
            sucess:function (data) {
                if (data.code==200){
                    // window.location.href="/order_detail.html?orderNo="+data.data;
                    layer.msg(data.data);
                    //建立连接
                    createScoket(uuid);
                }else {
                    layer.msg("操作状态码"+data.code+"错误消息"+data.msg);
                }
            }
        })
    }

    function showUserStatus(user){
        if (!user){
            $("#userTip").show();
            return;
        }
        //有值，表示user是当前用户对象
        u =user;
        uuid=getUuid(user.id);
        $("#verifyCode").show();
        $("#verifyCodeImg").show();

        initVerifyCodeImg();
    }


    $.ajax({
        url:"http://localhost:9000/seckillGood/getSeckillGoodDetail?seckillId="+seckillId,
        type:"get",
        xhrFields: { withCredentials: true },
        sucess:function (data) {
            if (data.code==200){
                renderData(data.data);
                renderDate(data.data.startDate,data.endData)
            }else {
                layer.msg("操作状态码"+data.code+"错误消息"+data.msg);
            }
        }
    })

    /**
     * startDate = 2020 -9 - 8 12:00
     * now  = 2020 - 9 - 8   16 : 30
     * startDate - now > 0      ======>距离秒杀开始还有多长时间
     * 秒杀状态 : 倒计时
     *
     * startDate = 2020 -9 - 8 12:00
     * now  = 2020 - 9 - 8   16 : 30
     * endDate = 2020 -4 - 24  13:00
     * startDate -  now  < 0
     * endDate - now > 0        ========> 距离秒杀结束还有多长时间
     * 秒杀状态  : 秒杀中
     *
     *
     * startDate = 2020 -4 - 24  12:00
     * now  = 2020 - 4 - 24   13:30
     * endDate = 2020 -4 - 24  13:00
     * startDate - now < 0
     * endDate - now < 0
     * 秒杀状态 : 秒杀已经结束了
     *
     */
    var remainStartDate; //距离开始时间
    var remainEndDate;  //距离结束的时间
    var timer;
    function renderDate(start,end) {
        var startDate=new Date(start);//开始时间
        var endDate=new  Date(end);   //结束时间
        var now=new Date();           //当前时间

        remainStartDate=parseInt((startDate.getTime()-now.getTime())/1000);
        remainEndDate=parseInt((endDate.getTime()-now.getTime())/1000);
        timer=setInterval(showTimeStatus,1000);
    }
        function showTimeStatus() {
            remainEndDate--;
            remainStartDate--;
            if (remainStartDate>0){
                $("#seckillTip").html("距离秒杀开始还有"+remainStartDate+"s");
            }else if (remainEndDate>0){
                $("#seckillTip").html("距离秒杀开始还有"+remainEndDate+"s");
            }else {
                $("#seckillTip").html("结束");
                //秒杀结束把定时任务清空
                clearInterval(timer);
            }
        }



    function renderData(data) {
        $("#goodName").html(data.goodName);
        $("#goodImg").prop("src",data.goodImg);
        $("#startDate").html(data.startDate);
        $("#goodPrice").html(data.goodPrice);
        $("#seckillPrice").html(data.seckillPrice);
        $("#stockCount").html(data.stockCount);

    }

</script>
</body>
</html>